<template>
  <Dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="1600px"
    :scroll="true"
    maxHeight="500px"
  >
    <el-descriptions class="margin-top" title="患者基本信息" :column="4" :size="size" border>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <user />
            </el-icon> -->
            姓名
          </div>
        </template>
        {{ formData.patientName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <male />
            </el-icon> -->
            性别
          </div>
        </template>
        {{ getDictLabel(DICT_TYPE.GENDER, formData.gender) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <timer />
            </el-icon> -->
            年龄
          </div>
        </template>
        {{ formData.age }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <calendar />
            </el-icon> -->
            出生年月
          </div>
        </template>
        {{ formatDate(formData.birthDate, 'YYYY-MM-DD') }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <postcard />
            </el-icon> -->
            证件号码
          </div>
        </template>
        {{ formData.idNumber }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <location />
            </el-icon> -->
            常住类型
          </div>
        </template>
        {{ getDictLabel(DICT_TYPE.RESIDENCE_TYPE, formData.residenceType) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <user />
            </el-icon> -->
            联系人姓名
          </div>
        </template>
        {{ formData.contactName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <iphone />
            </el-icon> -->
            联系人电话
          </div>
        </template>
        {{ formData.contactPhone }}
      </el-descriptions-item>
             <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            住院状态
          </div>
        </template>
        {{ getDictLabel(DICT_TYPE.ADMISSION_STATUS, formData.hospitalizationStatus) }}
      </el-descriptions-item>
      <el-descriptions-item :span="3">
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <location />
            </el-icon> -->
            现住详址
          </div>
        </template>
        {{ formData.currentAddress }}
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <location />
            </el-icon> -->
            户籍地
          </div>
        </template>
        {{ formData.permanentAddress }}
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <user />
            </el-icon> -->
            所属管理地区机构
          </div>
        </template>
        {{ formData.managementOrgName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            危险行为
          </div>
        </template>
        <el-tag v-if="formData.dangerousBehavior == '1'" size="small" type="danger">是</el-tag>
        <el-tag v-if="formData.dangerousBehavior == '2'" size="small">否</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            危险性评估
          </div>
        </template>
        {{ getDictLabel(DICT_TYPE.RISK_ASSESSMENT, formData.riskAssessment) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            用药依从性
          </div>
        </template>
        {{ getDictLabel(DICT_TYPE.MEDICATION_ADHERENCE, formData.medicationAdherence) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            建档日期
          </div>
        </template>
        {{ formatDate(formData.recordDate, 'YYYY-MM-DD') }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <tickets />
            </el-icon> -->
            下次随访日期
          </div>
        </template>
        {{ formatDate(formData.nextFollowupDate, 'YYYY-MM-DD') }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            末次修改时间
          </div>
        </template>
        {{ formatDate(formData.lastModified, 'YYYY-MM-DD') }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            末次随访时间
          </div>
        </template>
        {{ formatDate(formData.lastFollowupDate, 'YYYY-MM-DD') }}
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            失访原因
          </div>
        </template>
        {{getDictLabel(DICT_TYPE.LOST_REASON, formData.lostReason)}}
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            目前诊断
          </div>
        </template>
        {{ getDictLabel(DICT_TYPE.CURRENT_DIAGNOSIS, formData.currentDiagnosis) }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            是否死亡
          </div>
        </template>
        <el-tag v-if="formData.deceased=='1'" type="danger" size="small">是</el-tag>
        <el-tag v-if="formData.deceased=='2'" size="small">否</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            死亡日期
          </div>
        </template>
        {{ formatDate(formData.deathDate, 'YYYY-MM-DD') }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            末次出院时间
          </div>
        </template>
        {{ formatDate(formData.lastDischargeDate, 'YYYY-MM-DD') }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            末次减免服药时间
          </div>
        </template>
        {{ formatDate(formData.lastMedicationReductionDate, 'YYYY-MM-DD') }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            末次有奖时间
          </div>
        </template>
        {{ formatDate(formData.lastRewardDate, 'YYYY-MM-DD') }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            末次应急时间
          </div>
        </template>
        {{ formatDate(formData.lastEmergencyDate, 'YYYY-MM-DD') }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            末次体检时间
          </div>
        </template>
        {{ formatDate(formData.lastPhysicalExamDate, 'YYYY-MM-DD') }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            末次开案时间
          </div>
        </template>
        {{ formatDate(formData.lastCaseOpenDate, 'YYYY-MM-DD') }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            末次发病时间
          </div>
        </template>
        {{ formatDate(formData.lastOnsetDate, 'YYYY-MM-DD') }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            是否线索
          </div>
        </template>
        <el-tag v-if="formData.clue=='1'" size="small">是</el-tag>
        <el-tag v-if="formData.clue=='2'" size="small" type="danger">否</el-tag>
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions
      class="margin-top"
      title="肇事肇祸等严重精神病人员信息"
      :column="4"
      :size="size"
      border
    >
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <user />
            </el-icon> -->
            监护人姓名
          </div>
        </template>
        {{ formData.guardian }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <male />
            </el-icon> -->
            监护人联系电话
          </div>
        </template>
        {{ formData.contact }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <timer />
            </el-icon> -->
            轻度滋事（次）
          </div>
        </template>
        {{ formData.minorNuisanceCount }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <calendar />
            </el-icon> -->
            肇事次数
          </div>
        </template>
        {{ formData.incidentCount }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <postcard />
            </el-icon> -->
            肇祸次数
          </div>
        </template>
        {{ formData.offenseCount }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <iphone />
            </el-icon> -->
            自杀未遂（次）
          </div>
        </template>
        {{ formData.suicideAttemptCount }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            自伤（次）
          </div>
        </template>
        {{ formData.selfHarmCount }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            其他危险行为（次）
          </div>
        </template>
        {{ formData.otherDangerousBehaviorCount }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <location />
            </el-icon> -->
            负责人名称
          </div>
        </template>
        {{ formData.responsiblePerson }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            知情同意
          </div>
        </template>
        {{ formData.informedConsent }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <!-- <el-icon :style="iconStyle">
              <office-building />
            </el-icon> -->
            知情同意书时间
          </div>
        </template>
        {{ formatDate(formData.consentFormDate, 'YYYY-MM-DD') }}
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import {
  Iphone,
  Location,
  OfficeBuilding,
  Tickets,
  User,
  Female,
  Male,
  Timer,
  Postcard,
  Calendar,
  UserFilled
} from '@element-plus/icons-vue'
import type { ComponentSize } from 'element-plus'
import * as BaseInfoApi from '@/api/patient/baseInfo'
defineOptions({ name: 'BaseInfoDetail' })
const formData = ref({})
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题

/** 打开弹窗 */
const open = async (id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.detail')
  // 修改时，设置数据
  if (id) {
    formData.value = await BaseInfoApi.getPatientDetail(id)
  }
}

const size = ref<ComponentSize>('default')

const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px'
  }
  return {
    marginRight: marginMap[size.value] || marginMap.default
  }
})

defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
<style lang="scss" scoped>
.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
</style>
